<!-- 机构端-申请入驻-营业执照 -->
<template>
	<view class="container">
		<!-- 步骤条 -->
		<u-steps :list="stepsList" :current="setpCurrent" active-color="#03B8CD" mode="number" v-show="enterCode !== 'mine'">
		</u-steps>
		<!-- 日历 -->
		<u-calendar v-model="show" ref="calendar" @change="change" :active-bg-color="activeBgColor" :btn-type="btnType"
			max-date="2100-01-01">
		</u-calendar>
		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 提交的this.$refs.form.validate验证，一定是需要有form标签的ref="form"来对应的，否则会报错 -->
			<u-form :model="form" ref="form" :rules="rules">
				<!-- 营业执照上传 -->
				<view class="form-section">
					<view class="section-title">
						<text class="required">*</text>
						<text>营业执照</text>
						<text class="section-subtitle">上传营业执照，确保图中文字清晰可识别</text>
						<text class="upload-tip">仅支持JPG/PNG格式，大小不超过2MB</text>
					</view>
					<!-- 				<u-upload :action="action" :file-list="licenseFiles" @on-list-change="onchange"
						@on-remove="(e) => photoDelete(e, index)" :multiple="false" max-count="1" upload-text="上传营业执照"></u-upload> -->
					<!-- 营业执照图片上传区域 -->
					<view class="upload-area" @click="chooseImage">
						<!-- 显示上传的图片 -->
						<image v-if="licenseFiles" :src="licenseFiles" mode="aspectFill" class="preview-image"
							@click.stop="previewImage">
						</image>
						<!-- 上传按钮图标（无图片时显示） -->
						<view v-else class="upload-btn">
							<u-icon name="photo" color="#b6b6b6" size="38"></u-icon>
							<text class="upload-text">点击上传图片</text>
							<!-- 							<text class="upload-tip">仅支持JPG/PNG格式，大小不超过2MB</text> -->
						</view>
						<!-- 删除按钮（有图片时显示） -->
						<view v-if="licenseFiles" class="delete-btn" @click.stop="deleteImage">
							<u-icon name="close" color="#ffffff" size="28"></u-icon>
						</view>
					</view>

				</view>

				<!-- 营业执照名称 -->
				<view class="form-section">
					<u-form-item label="*营业执照名称" prop="companyName" label-width="240">
						<u-input v-model="form.companyName" placeholder="请输入营业执照上企业名称" clearable />
					</u-form-item>
				</view>

				<!-- 社会信用代码 -->
				<view class="form-section">
					<u-form-item label="*社会信用代码" prop="creditCode" label-width="240">
						<u-input v-model="form.creditCode" placeholder="请输入统一社会信用代码" clearable />
					</u-form-item>
				</view>

				<!-- 法人姓名 -->
				<view class="form-section">
					<u-form-item label="*法人姓名" prop="legalPerson" label-width="240">
						<u-input v-model="form.legalPerson" placeholder="请输入姓名" clearable />
					</u-form-item>
				</view>

				<!-- 执照起始日期 -->
				<view class="form-section">
					<u-form-item label="*执照起始日期" prop="startDate" label-width="240">

						<u-input v-model="form.startDate" placeholder="营业执照注册/成立日期" clearable @click="showChange('start')" />
					</u-form-item>
				</view>

				<!-- 执照有效期 -->
				<view class="form-section">
					<u-form-item label="执照有效期" prop="endDate" label-width="240">
						<u-input v-model="form.endDate" placeholder="营业执照截止日期" clearable @click="showChange('end')" />
					</u-form-item>
				</view>

				<!-- 注册地址 -->
				<view class="form-section">
					<u-form-item label="注册地址" prop="address" label-width="240">
						<u-input v-model="form.address" placeholder="请输入" clearable />
					</u-form-item>
				</view>

				<!-- 按钮组 -->
				<view class="button-group">
					<u-button type="default" @click="handlePrev" shape="circle" :custom-style="btuStyle" v-show="enterCode !== 'mine'">
						上一步
					</u-button>
					<u-button type="primary" :custom-style="btuStyle" @click="handleNext" shape="circle" :loading="loading" v-if="enterCode !== 'mine'">
						信息无误，下一步
					</u-button>
					<u-button v-else type="primary" :custom-style="btuStyle" @click="handleNext" shape="circle" :loading="loading">
						保存
					</u-button>
				</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				enterCode: '',
				// 当前步骤
				setpCurrent: 1,
				//按钮统一色彩 
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff",
					marginRight: '20rpx',
				},
				//按钮统一色彩 
				// 日历 
				show: false,
				activeBgColor: '#2979ff',
				btnType: "primary",

				loading: false,

				//图片上传地址(不配置action地址，通过接口上传)
				action: '#',
				// 图片数组
				licenseFiles: '',
				showStatus: 0, //、判断是否重新刷新显示
				showUploadList: false,
				customBtn: false,
				autoUpload: false,
				showProgress: true,
				deletable: true,
				customStyle: false,
				maxCount: 1,
				lists: [], // 组件内部的文件列表				

				base64Data: '', // 图片存储转换后的Base64数据
				photo_base_info: '', ///存储服务器返回图片的ID
				loginPhone: '', ///存储修改入驻时的手机号
				flowid: '',  ////flowid谭纪雄
				// 步骤条
				stepsList: [{
						name: "手机号"
					},
					{
						name: "营业执照"
					},
					{
						name: "企业信息"
					}
				],
				inputType: "", //判断是起始日期还是有效日期
				form: {
					companyName: '', //企业名称
					creditCode: '', //营业执照号
					legalPerson: '', //法人
					startDate: '', //执照起始日期
					endDate: '', //有效日期
					address: '' //注册地址
				},
				rules: {
					companyName: [{
						required: true,
						message: '请输入营业执照名称',
						trigger: 'blur'
					}],
					creditCode: [{
							required: true,
							message: '请输入社会信用代码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return /^[0-9A-Z]{18}$/.test(value);
							},
							message: '请输入18位统一社会信用代码',
							trigger: ['blur', 'change']
						}
					],
					legalPerson: [{
						required: true,
						message: '请输入法人姓名',
						trigger: 'blur'
					}],
					startDate: [{
						required: true,
						message: '请选择起始日期',
						trigger: 'change'
					}]
				}
			}
		},
		onLoad(options) {
			this.loginPhone = options.phoneno
			this.enterCode = options.enterCode
		},
		onShow() {
			console.log('入驻2-1-onshow:', this.loginPhone)
			// 获取企业信息
			this.getQyxx()	
			// 通过手机号查询营业执照
			// this.getyyzzPhone()

		},
		methods: {
			// 获取企业信息
			getQyxx() {
				this.$u.api.queryjgqyxx({
					"usercode": uni.getStorageSync('usercode')
				}).then(res => {
					console.log('企业信息：', res)					
					let baseinfo = res.data.base_info.yyzz
					this.flowid = res.data.base_info.base.flow_id
					this.licenseFiles = baseinfo.img_uri[0].url
					this.photo_base_info = baseinfo.img_uri[0].imguri
					this.form = {
						companyName: baseinfo.yyzz_name, //企业名称
						creditCode: baseinfo.yyzz_code, //营业执照号
						legalPerson: baseinfo.yyzz_username, //法人
						startDate:  baseinfo.yyzz_startdate, //执照起始日期
						endDate: baseinfo.yyzz_enddate, //有效日期
						address: baseinfo.yyzz_addr //注册地址
					}
				})
			},
			// 通过手机号查询营业执照
			getyyzzPhone() {
				if (!util.isEmpty(this.loginPhone) && this.showStatus == 0) {
					this.$u.api.queryjguser({
						phoneno: this.loginPhone
					}).then(res => {
						// 修改信息
						const yyzz = res.data.base_info.yyzz
						this.form.companyName = yyzz.yyzz_name
						this.form.creditCode = yyzz.yyzz_code
						this.form.legalPerson = yyzz.yyzz_username
						this.form.startDate = yyzz.yyzz_startdate
						this.form.endDate = yyzz.yyzz_enddate
						this.form.address = yyzz.yyzz_addr
						this.licenseFiles = yyzz.img_uri
						// 将图片的id单独存储
						this.photo_base_info = yyzz.img_uri[0].imguri
						this.showStatus = 1
				
						console.log('入驻2:', this.licenseFiles, this.photo_base_info)
					})
				}
			},
			// 用image的图片处理
			// 选择图片（限制1张）
			chooseImage() {
				uni.chooseImage({
					count: 1, // 只能选择1张
					sizeType: ['compressed'], // 压缩图
					sourceType: ['album', 'camera'], // 相册和相机
					success: (res) => {
						// tempFiles以数组文件存储文件的具体数据， tempFilePaths以数组只存储图片的路径
						console.error('选择图片:', res.tempFiles, res.tempFilePaths);
						const tempFile = res.tempFiles[0];

						// 检查图片大小（示例限制2MB）
						if (tempFile.size > 2 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小超过2MB',
								icon: 'none'
							});
							return;
						}

						this.licenseFiles = res.tempFilePaths[0];

						util.getPhotoBase64(this.licenseFiles, base64 => {
							// console.log('main-bser64', base64)
							this.base64Data = base64
							// 转换成功后上传
							this.uploadBase64()
						})

						// this.uploadImage(tempFile); // 自动触发上传
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},

			// 预览图片
			previewImage() {
				uni.previewImage({
					current: 0, // 当前显示图片索引
					urls: [this.licenseFiles] // 需是数组
				});
			},

			// 删除图片
			deleteImage() {
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片吗？',
					success: (res) => {
						if (res.confirm) {
							this.licenseFiles = '';
							uni.showToast({
								title: '已删除',
								icon: 'success'
							});

							// 实际项目中可调用接口删除服务器图片
							// this.deleteImageOnServer();
						}
					}
				});
			},

			// 上传图片到服务器（示例）
			uploadImage(file) {
				uni.showLoading({
					title: '上传中...',
					mask: true
				});

				uni.uploadFile({
					url: 'https://your-api.com/upload',
					filePath: file.path,
					name: 'file',
					formData: {
						type: 'avatar'
					}, // 附加参数
					success: (res) => {
						const data = JSON.parse(res.data);
						console.log('上传成功:', data);
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});

						// 实际项目中保存服务器返回的URL
						// this.imageUrl = data.url;
					},
					fail: (err) => {
						console.error('上传失败:', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},

			// 营业执照上传
			// 只要图片列表中变化了，就触发
			onchange(list, name) {
				// 这个图片变化时处理，当删除图片为空时，就不处理了
				if (list.length != 0) {
					const file = list[0]
					// console.log("onchange:", file.url)
					// 处理新准备上传的照片文件（添加必要字段）
					const newFiles = list.map(item => ({
						url: item.url, // 临时路径
						// name: item.file.name || `file_${Date.now()}`,
						// type: item.file.type,
						// size: item.file.size,
						// status: 'uploading',
						// progress: 0
					}))
					// console.log("onchange-1:", newFiles)
					// this.licenseFiles = file // 更新文件列表	
					this.licenseFiles = []
					this.licenseFiles = [...this.licenseFiles, ...newFiles];
					// console.log("onchange-2:", this.licenseFiles, list[0].url)
					// 将图片转换为Base64
					util.getPhotoBase64(file.url, base64 => {
						// console.log('main-bser64', base64)
						this.base64Data = base64
						// 转换成功后上传
						this.uploadBase64()
					})
				} else {
					console.log('没有图片了，不能转64!')
				}
				// this.getBase64(file.url).then(base64 => {
				// 	this.base64Data = base64
				// 	console.log('转换Base64:', this.base64Data)
				// 	// 转换成功后上传
				// 	this.uploadBase64()

				// }).catch(err => {
				// 	// console.error('转换Base64失败:', err)
				// 	uni.showToast({
				// 		title: '图片处理失败',
				// 		icon: 'none'
				// 	})
				// })

			},

			// 将图片URL转换为Base64
			// getBase64(fileUrl) {
			// 	return new Promise((resolve, reject) => {
			// 		// getFileSystemManager只能微信小程序中使用
			// 		// 判断环境
			// 		// #ifdef MP-WEIXIN
			// 		console.log('MP-WEIXIN')
			// 			uni.getFileSystemManager().readFile({
			// 				filePath: fileUrl,
			// 				encoding: 'base64',
			// 				success: res => {
			// 					// 添加Base64前缀（根据实际图片类型）--目前暂时不用添加前缀
			// 					// let prefix = 'data:image/jpeg;base64,'
			// 					// if (fileUrl.indexOf('.png') !== -1) {
			// 					// 	prefix = 'data:image/png;base64,'
			// 					// } else if (fileUrl.indexOf('.gif') !== -1) {
			// 					// 	prefix = 'data:image/gif;base64,'
			// 					// }
			// 					// resolve(prefix + res.data)
			// 					resolve(res.data)
			// 				},
			// 				fail: err => {
			// 					reject(err)
			// 				}
			// 			})										
			// 			// #endif
			// 			// #ifdef H5	
			// 				// 非微信暂时不起作用，先留着
			// 				console.log('H5')
			// 				this.convertBrowserImage(fileUrl).then(resolve).catch(reject)
			// 			// #endif
			// 	})
			// },

			// 非微信图片转base64处理
			// convertBrowserImage(file) {
			// 		console.log('H5-1',reader.result)
			//   return new Promise((resolve, reject) => {
			//     const imgFile = file.originFileObj || file

			//     if (!(imgFile instanceof Blob)){
			//       reject(new Error('无效的文件对象'))
			//       return
			//     }			
			//     const reader = new FileReader()
			//     reader.onload = () => resolve(reader.result)
			//     reader.onerror = () => reject(new Error('文件读取失败'))
			//     reader.readAsDataURL(imgFile)
			//   })
			// },

			// 删除图片
			photoDelete(event, index) {
				this.licenseFiles.splice(event, 1); // 从数组中移除对应文件
			},


			// 上传Base64数据到服务器
			uploadBase64() {
				// console.log('upload:', this.base64Data)
				if (!this.base64Data) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					})
					return
				}

				uni.showLoading({
					title: '上传中...'
				})

				this.$u.api.uploadres({
					"usercode": uni.getStorageSync('flowid'),
					"rescode": this.base64Data,
					"restype": "0",
					"resdesc": "上传营业执照"
				}).then(res => {
					console.log('uploadres:', res)
					this.photo_base_info = res.data.base_info
				})
			},

			// 是否显示日历
			showChange(type) {
				this.inputType = type;
				this.show = !this.show;
			},

			// 日历选择
			change(e) {
				if (this.inputType == 'start') {
					// 赋值给相应的输入执照起始日期
					this.form.startDate = e.result;
				} else {
					// 赋值有效日期
					this.form.endDate = e.result;
				}

			},

			// 上一步
			handlePrev() {
				// uni.navigateBack();
				this.showStatus = 0
				uni.navigateTo({
					url: '/pages/Institution/settleIn/index'
				});
			},

			// 下一步
			handleNext() {
				this.loading = true;
				// 上传服务端
				this.$u.api.postjgyyzz({
					"flowid": uni.getStorageSync('flowid')  ? uni.getStorageSync('flowid') : this.flowid,
					"yyzzimguri": this.photo_base_info,
					"yyzzname": this.form.companyName,
					"yyzzcode": this.form.creditCode,
					"yyzzusername": this.form.legalPerson,
					"yyzzstartdate": this.form.startDate,
					"yyzzenddate": this.form.endDate,
					"yyzzaddr": this.form.address,
					"yyzzstatus": "0"
				}).then(res => {
					this.showStatus = 0
					this.loading = false;
					console.log('yyzz:', res)
					if(this.enterCode === 'mine') {
						uni.switchTab({
							url: '/pages/instTabBar/mine'
						})	
					} else {
						uni.navigateTo({
							url: `/pages/Institution/settleIn/enterpriseInfo?phoneno=${this.loginPhone}`
						});
					}

				})

				// this.$refs.form.validate(valid => {
				// 	if (!valid) return;

				// 	// if (this.licenseFiles.length === 0) {
				// 	// 	return this.$u.toast('请上传营业执照');
				// 	// 	// console.log('toast请上传营业执照');
				// 	// }


				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx;
		background-color: #F1F7F7;
		// min-height: 100vh;


		// 图片上传image
		/* 上传区域 */
		.upload-area {
			width: 200rpx;
			height: 200rpx;
			border: 1px dashed #ddd;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			overflow: hidden;
			background-color: #f9f9f9;
		}

		/* 预览图片样式 */
		.preview-image {
			width: 100%;
			height: 100%;
		}

		/* 上传按钮样式 */
		.upload-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #999;
		}

		.upload-text {
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.upload-tip {
			font-size: 22rpx;
			color: #ccc;
			margin-top: 20rpx;
		}

		/* 删除按钮 */
		.delete-btn {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: rgba(0, 0, 0, 0.5);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 10;
		}


		// 头部
		.header {
			margin-bottom: 40rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		/deep/ .u-steps {
			background: #fff;
			padding: 30rpx;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
		}

		.form-container {
			background: #fff;
			padding: 40rpx;
			border-radius: 12rpx;

			.form-section {
				margin-bottom: 40rpx;
				display: flex;
				flex-direction: row;
				align-content: flex-start;
				align-items: center;


				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
					margin-right: 8rpx;

					.required {
						color: #f56c6c;

					}
				}

				.section-subtitle {
					font-size: 26rpx;
					color: #999;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			/deep/ .u-form-item__label {
				.required {
					color: #f56c6c;
					margin-right: 8rpx;
				}
			}

			.button-group {
				display: flex;
				justify-content: space-between;
				margin-top: 60rpx;

				// 此样式主要为了适配wx小程序的按钮
				/deep/ .u-size-default {
					width: 150px;
				}

				.u-btn {
					flex: 1;
				}
			}
		}
	}
</style>